<script lang="tsx" setup>
import {
  getPermitImplementationReportF9,
  getPermitRegistrationF9,
  getPermitBlendF9, getPermitRectificationF9
} from '@/views/modules/enterprise/apis/pollution-discharge-permits';
import PageHeader from '../../components/page-header.vue';
import CommonPage from './components/common-page.vue';
import { ModuleEnum, INIT_TAB_STYLE } from './constants';
import { generateCssVars } from '@vc/utils';
import PreApplicationInformation from './modules/pre-application-information.vue';
import PollutionDischargePermits from './modules/pollution-discharge-permits.vue';
import PollutionDischargePermitLimits from './modules/pollution-discharge-permit-limits.vue';

interface Props {
  tabs: Record<string, any>;
}

const { tabs } = defineProps<Props>();

const modulesMap = new Map<string, any>([
  [ModuleEnum.RECTIFICATION_WITHIN_A_TIME_LIMIT, {
    api: getPermitRectificationF9,
    name: ModuleEnum.RECTIFICATION_WITHIN_A_TIME_LIMIT,
    modalTitle: '排污限期整改详情'
  }],
  [ModuleEnum.REGISTRATION_INFORMATION, {
    api: getPermitRegistrationF9,
    name: ModuleEnum.REGISTRATION_INFORMATION,
    modalTitle: '登记明细'
  }],
  [ModuleEnum.EXECUTE_THE_REPORT, {
    api: getPermitImplementationReportF9,
    name: ModuleEnum.EXECUTE_THE_REPORT,
    modalTitle: '更多执行报告'
  }],
  [ModuleEnum.REVOKE_THE_LOGOUT, { api: getPermitBlendF9, name: ModuleEnum.REVOKE_THE_LOGOUT }]
]);
</script>

<template>
  <div class="container" :style="generateCssVars(INIT_TAB_STYLE, 'tabs')">
    <page-header :title="tabs.name" :menuId="tabs.id" />
    <pre-application-information
      v-if="tabs.functions?.[0]?.status === 0"
      :menuId="tabs.functions?.[0]?.id"
      :count="tabs.functions?.[0]?.count"
      :title="tabs.functions?.[0]?.name"/>
    <pollution-discharge-permits
      v-if="tabs.functions?.[1]?.status === 0"
      :menuId="tabs.functions?.[1]?.id"
      :count="tabs.functions?.[1]?.count"
      :title="tabs.functions?.[1]?.name"/>

    <template v-for="(item, index) in tabs.functions.slice(2)" :key="index">
      <common-page v-if="item.status === 0 && modulesMap.get(item.name)"
        :info="modulesMap.get(item.name)" :menuId="item.id" :count="item.count"
        :title="item.name"
      />
    </template>

    <pollution-discharge-permit-limits v-if="tabs.functions[5].status === 0" :menuId="tabs.functions[5].id" :count="tabs.functions[5].count" :title="tabs.functions[5].name"/>
  </div>
</template>

<style lang="scss" scoped>
.container {
  :deep(.descriptions) {
    .vc-descriptions__cell.is-bordered-label{
      background-color: rgba(231,247,243,0.3) !important;
    }

    .vc-descriptions__label {
      color: #666666;
    }
    .vc-descriptions__content {
      color: #111111;
    }
    .vc-descriptions__cell {
      padding: 5px 7px!important;
      font-size: 13px;
      border: 1px solid #F6F6F6;
      border-radius: 4px !important;
    }
  }
}
</style>
